<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            {{msg}} 
            姓名: <input type="text" v-model="values" />
            <p>姓:{{ nameXing }}</p>
            <p>名:{{ nameMing }}</p>
        </div>
        <script src="../vue.js"></script>
        <script>
            let vm = new Vue({
                el: '#app',
                data() {
                    return {
                        text: 'hello',
                        values: '',
                        nameXing: '',
                        nameMing: '',
                        ary: [
                            '欧阳',
                            '上官',
                            '皇甫',
                            '东郭',
                            '诸葛',
                            '龚子',
                            '李杜',
                            '司马',
                            '慕容',
                            '端木',
                        ],
                    };
                },
                methods: {
                    handlerName(val) {
                        console.log(val);
                    },
                },
                computed: {
                    msg() {
                        return this.text.split('').reverse().join('');
                    },
                    // computed 有缓存
                    // nameXing() {},
                    // nameMing() {},
                },
            });
        </script>
    </body>
</html>
